import './index.css'

import { Button, DatePicker, Input, Pagination, Select, Table } from 'antd'
import type { TableColumnsType, TableProps } from 'antd'
import { useEffect, useState } from 'react'
import { useRedel, useReturns } from '@/api/query'

import { DatePickerProps } from 'antd/es/date-picker'
import { Moment } from 'moment'
// import type { DatePickerProps } from 'antd'
import { SearchOutlined } from '@ant-design/icons'
import { reruens } from '@/types/order'
import { useNavigate } from 'react-router-dom'

type TableRowSelection<T> = TableProps<T>['rowSelection']
export default function Index() {
  const [page, setpage] = useState<number>(1) //当前页数
  const [pageSize, setpageSize] = useState<number>(10) //每页显示条数
  const [total, setTotal] = useState<number>(10) //每页显示条数
  const [createTime, setCreateTime] = useState<Moment | null>() //申请时间
  const [handleTime, sethandleTime] = useState<Moment | null>() //处理时间
  const [status, setstatus] = useState<number>() //状态
  const [ids, setids] = useState<number | undefined>() //服务单号
  const [memberUsername, setmemberUsername] = useState<string | undefined>() //操作人员
  const dateonChange: DatePickerProps['onChange'] = (date) => {
    setCreateTime(date) // 使用 moment 对象
  }

  const dateonChanges: DatePickerProps['onChange'] = (data) => {
    sethandleTime(data)
  }
  const [obj, setobj] = useState<object>({})
  const { isLoading, data, isError } = useReturns(page, pageSize, obj)

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const value = event.target.value
    setids(value)
  }
  const seach = () => {
    setobj({
      id: ids,
      memberUsername,
      createTime: createTime,
      handleTime: handleTime,
      status
    })
  }
  //全选
  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    setSelectedRowKeys(newSelectedRowKeys)
  }

  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]) //状态
  const rowSelection: TableRowSelection<DataType> = {
    selectedRowKeys,
    onChange: onSelectChange
  }

  const columns: TableColumnsType<reruens> = [
    {
      title: '服务编号',
      dataIndex: 'id'
    },
    {
      title: '申请时间',
      dataIndex: 'createTime'
    },
    {
      title: '用户账号',
      dataIndex: 'memberUsername'
    },
    {
      title: '退款金额',
      dataIndex: 'returnAmount'
    },
    {
      title: '申请状态',
      dataIndex: 'status',
      render: (status: number) => {
        return status == 1
          ? '待处理'
          : status == 2
            ? '退货中'
            : status == 3
              ? '已完成'
              : '已拒绝'
      }
    },
    {
      title: '处理时间',
      dataIndex: 'handleTime'
    },
    {
      title: '操作',
      key: 'operation',
      fixed: 'right',
      width: 150,
      render: (_, record) => {
        return (
          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
            <a onClick={() => gedetails(record._id)}>查看详情</a>
          </div>
        )
      }
    }
  ]
  const navigate = useNavigate()
  const gedetails = (id: string) => {
    navigate(`/reTurns`, { state: id })
    // sessionStorage.setItem('returnid', id)
  }
  const chongzhi = () => {
    setids(undefined)
    setstatus(undefined)
    setCreateTime(undefined)
    sethandleTime(undefined)
    setmemberUsername(undefined)
  }
  const [reruens, setretuens] = useState<reruens[]>([])

  // const orderDetail = data as fn

  useEffect(() => {
    if (data) {
      const com = data.data?.map((item: reruens) => {
        return { key: item._id, ...item }
      })
      setretuens(com)
      setTotal(data.total)
    }
  }, [data])
  const pagereturns = (page: number, pageSize?: number) => {
    setpage(page)
    if (pageSize) {
      setpageSize(pageSize)
    }
  }
  // 批量删除
  //批量删除
  const [list, setlist] = useState<React.Key[]>()
  const { mutate } = useRedel(list)
  const del = () => {
    setlist(selectedRowKeys)
    mutate()
  }
  if (isLoading) {
    return <div>Loding...</div>
  }
  if (isError) {
    return <div>Error...</div>
  }
  return (
    <div className="boby">
      <div className="head">
        <div className="seach">
          <div>
            <Button shape="circle" icon={<SearchOutlined />} />{' '}
            <span>筛选搜索</span>
          </div>
          <div>
            <Button type="text" onClick={() => chongzhi()}>
              重置
            </Button>
            <Button type="primary" onClick={() => seach()}>
              查询搜索
            </Button>
          </div>
        </div>
        <div className="sou">
          <div className="dd">
            输入搜索:
            <Input
              placeholder="服务单号"
              className="input-search"
              onChange={handleChange}
              value={ids}
            />
            处理状态:
            <Select
              className="input-search"
              style={{ width: 200 }}
              options={[
                { value: 1, label: '待处理' },
                { value: 2, label: '退货中' },
                { value: 3, label: '已完成' },
                { value: 4, label: '已拒绝' }
              ]}
              value={status}
              placeholder="全部"
              onSelect={(event) => setstatus(event)}
            />
          </div>
          <div className="dd">
            申请时间:
            <DatePicker
              onChange={dateonChange}
              placeholder="请选择日期"
              className="input-search"
              value={createTime}
              showTime={{ format: 'HH:mm:ss' }}
            />
            操作人员:
            <Input
              placeholder="操作人员"
              className="input-search"
              onChange={(event) => setmemberUsername(event.target.value)}
              value={memberUsername}
            />
          </div>
          <div>
            <div className="dd">
              处理时间:
              <DatePicker
                onChange={dateonChanges}
                placeholder="请选择日期"
                className="input-search"
                value={handleTime}
                showTime={{ format: 'HH:mm:ss' }}
              />
            </div>
          </div>
        </div>
      </div>
      <div className="zzz">
        <div className="tables">
          <Table
            rowSelection={rowSelection}
            columns={columns}
            dataSource={reruens}
            pagination={false}
          />
        </div>
        <div className="pages">
          <div>
            <Select
              className="input-search"
              style={{ width: 200 }}
              options={[{ value: 1, label: '批量处理' }]}
              defaultValue={1}
              placeholder="全部"
            />
            <Button onClick={() => del()}>确定</Button>
          </div>
          <Pagination
            current={page}
            pageSize={pageSize}
            onChange={pagereturns}
            total={total}
            onShowSizeChange={pagereturns}
          />
        </div>
      </div>
    </div>
  )
}
